<template>
  <fieldset>
    <legend>动态组件</legend>
    <h1 class="dynamic" :is="name"></h1>
    <!-- <comA></comA>
        <comB></comB> -->
  </fieldset>
</template>

<script>
import comA from "./comA.vue";
import comB from "./comB.vue";
// 通过给元素添加is属性，is的值是一个组建的名字，组件的结构会替换掉当前元素的结构
// 属性会被继承
export default {
  data() {
    return {
      name: comA,
    };
  },
  components: {
    comA,
    comB,
  },
};
</script>


<style scoped>
.dynamic {
  border: 1px dashed hotpink;
}
</style>


